<template>
  <div>

    {{ jsonData }}
    <el-form
      v-for="(item,index) in jsonData"
      :inline="true"
      :model="item"
      class="demo-form-inline"
      style="width: 100%;"
    >
      <el-form-item v-for="(val,key) in item" style="width: 250px;">
        <div v-show="index==0" :class="{white:index==0}">{{ key }}</div>

        <el-input
          v-model="item[key]"
          :placeholder="key"
          type="textarea"
          :autosize="{ minRows: 1, maxRows: 1}"
          style="width: 120%;"
          :rules="[
            { required: true, message: '请输入邮箱地址', trigger: ['blur', 'change'] },

          ]"
        />

        <!-- <el-button type="primary" icon="el-icon-plus" circle @click="add"></el-button>
          <el-button type="danger" icon="el-icon-delete" circle @click="delectData(item,index)"></el-button> -->

      </el-form-item>

      <!-- <el-form-item  style="width: 80px;margin-left:-50px" >
        <div :class="{white:index !==0}" v-show="index==0">操作</div>
        <i class="el-icon-plus" @click="add"></i>
        <i class="el-icon-delete" @click="delectData(item,index)"></i>

        "[{\"Code\":\"\",\"OpenId\":\"\",\"tag\":\"\"}]"
        "[{\"Code\":\"\",\"OpenId\":\"\"}]"

      </el-form-item> -->

    </el-form>
    <!-- <el-button type="primary" @click="postData">确定</el-button> -->

  </div>
</template>

<script>
export default {
  name: 'VueUITable',
  props: ['keyval'],
  data() {
    return {
      jsonData: null,
      box: {}
    }
  },
  watch: {
    keyval: {
      deep: true,
      handler(val) {
        // console.log('val: ', val);
        try {
          this.jsonData = JSON.parse(val)
        } catch (error) {
          // console.log('error: ', error);

        }
      }
    }
  },

  mounted() {
    // console.log(this.keyval);
    if (this.keyval) {
      this.jsonData = JSON.parse(this.keyval)
      // console.log(this.jsonData);
    }
  },

  methods: {
    add() {
      if (this.keyval) {
        const s = JSON.parse(this.keyval)[0]
        const box = {}

        for (const key in s) {
          box[key] = ''
        }

        this.jsonData.push(box)
      } else {
        this.$message({
          message: '数据错误,请稍后重试',
          duration: 2000,
          type: 'error'
        })
      }

      // this.jsonData.push(JSON.parse(this.keyval)[0]);
    },
    delectData(item, index) {
      if (this.jsonData.length > 1) {
        this.jsonData.splice(index, 1)
      } else {
        this.$message({
          message: '不能再少了',
          duration: 2000,
          type: 'error'
        })
      }
    },
    postData() {
      this.$emit('postData', this.jsonData)
    }
  }
}

</script>

<style lang="scss" scoped>
/* .white{
  color:white;
  background-color: #409EFF;
  width: 129%;
  text-align: center;
} */
.el-icon-plus {
  vertical-align:middle;
  font-size: 20px !important;
  color: #409EFF;
  margin-left: 10px;
}
.el-icon-delete{
  vertical-align:middle;
  font-size: 20px !important;
  color: #ff4040;
  margin-left: 10px;
}
</style>
